<template>
  <div>

    <Card class="search">
      <Row>
        <Form inline :label-width="70">
          <FormItem label="用户名">
            <Input placeholder="请输入用户名" size="large" clearable style="width: 200px;"> </Input>
          </FormItem>

          <FormItem label="部门">
            <Cascader filterable placeholder="请选择部门搜索部门" size="large" clearable style="width: 200px;"></Cascader>
          </FormItem>
          <span v-if="drop">
          <FormItem label="手机号"><Input placeholder="请输入手机号" size="large" clearable style="width: 200px;"> </Input>
          </FormItem>
          <FormItem label="邮箱"><Input placeholder="请输入邮箱" size="large" clearable style="width: 200px;"> </Input>
          </FormItem>
          <FormItem label="性别">
             <Select style="width:200px" placeholder="请选择性别" size="large">
               <Option value="1" label="男"></Option>
               <Option value="0" label="女"></Option>
            </Select>
          </FormItem>
          <FormItem label="登录账号"><Input placeholder="请输入登录账号" size="large" clearable style="width: 200px;"> </Input>
          </FormItem>
          <FormItem label="用户ID"><Input placeholder="请输入用户ID" size="large" clearable style="width: 200px;"> </Input>
          </FormItem>
          <FormItem label="创建时间"><Input placeholder="请输入创建时间" size="large" clearable style="width: 200px;"> </Input>
          </FormItem>
        </span>
          <FormItem>
            <Button type="primary" size="large" icon="ios-search">搜索</Button>
            <Button size="large" style="margin-left: 8px">重置</Button>
            <a @click="dropDown">
              {{dropDownContent}}
              <Icon :type="dropDownIcon"></Icon>
            </a>
          </FormItem>
        </Form>
      </Row>
      <Row class="operation">
        <Button size="large" type="primary" icon="md-add" @click="openDrawer('add',{})">添加用户</Button>
        <Button size="large" icon="md-trash" @click="deleteUserList">批量删除</Button>
        <Dropdown>
          <Button size="large">
            更多操作
            <Icon type="ios-arrow-down"></Icon>
          </Button>
          <DropdownMenu slot="list">
            <DropdownItem>重置用户密码</DropdownItem>
            <DropdownItem>导出所选数据</DropdownItem>
            <DropdownItem> 导出全部数据</DropdownItem>
            <DropdownItem>导入数据</DropdownItem>
          </DropdownMenu>
        </Dropdown>
        <Button size="large" type="dashed" @click="selectUserAllByPage">刷新</Button>
        <Button size="large" type="dashed">关闭搜索</Button>
        <Button size="large" type="dashed">关闭提示</Button>
      </Row>
      <Alert show-icon>已选择 <a>{{selectCount}}</a> 项 <a @click="clear">清空</a></Alert>
      <Table :columns="userColumns" ref="table" :data="userList" border draggable >

        <template slot-scope="{ row, index }" slot="action">
          <Button type="primary" size="small" style="margin-right: 5px" @click="openDrawer('edit',row)">修改</Button>
          <Button size="small" style="margin-right: 5px" @click="deleteOne(row.id)">禁用</Button>
          <Button type="error" size="small" @click="deleteOne(row.id)">删除</Button>
        </template>
      </Table>
      <div style="margin: 10px;overflow: hidden">
        <div style="float: right;">
          <Page :total="page.total" :current="page.pageNum" @on-change="pageChange"
                @on-page-size-change="pageSizeChange" :page-size="page.pageSize" show-total show-elevator show-sizer/>
        </div>
      </div>
    </Card>
    <user-edit ref="userEdit" :open-edit="openEdit" @closeDrawer="closeDrawer"
               @selectUserAllByPage="selectUserAllByPage"/>
  </div>
</template>

<script>
  import { selectAllByPage, deleteUserList } from '@/api/user-api.js'
  import userEdit from './user-edit'
  import { ApiErrorCode } from '@/libs/util'

  export default {
    components: {
      userEdit
    },
    name: 'user_list',
    data () {
      return {
        openEdit: false,
        page: {
          total: 0,
          pageNum: 1,
          pageSize: 10
        },
        drop: false,
        selectCount: 0,
        dropDownContent: '展开',
        dropDownIcon: 'ios-arrow-down',
        userColumns: [
          {
            type: 'selection',
            width: 60,
            align: 'center',
            fixed: 'left',
            ellipsis: true
          },
          {
            title: '登录账号',
            key: 'username',
            sortable: true,
            ellipsis: true,
            tooltip: true,
            resizable: true,
            fixed: 'left',
            width: 150
          },
          {
            title: '用户名',
            key: 'nickName',
            sortable: true,
            ellipsis: true,
            tooltip: true,
            resizable: true,
            fixed: 'left',
            width: 150
          },
          {
            title: '头像',
            key: 'avatar',
            sortable: true,
            ellipsis: true,
            tooltip: true,
            resizable: true,
            width: 150,
            render: (h, params) => {
              let src = params.row.avatar
              return h('Avatar', {
                props: {
                  src: src
                }
              })
            }
          },
          {
            title: '所属部门',
            key: 'description',
            sortable: true,
            ellipsis: true,
            tooltip: true,
            resizable: true,
            width: 150
          },
          {
            title: '手机',
            key: 'mobile',
            sortable: true,
            ellipsis: true,
            tooltip: true,
            resizable: true,
            width: 200
          },
          {
            title: '邮箱',
            key: 'email',
            sortable: true,
            ellipsis: true,
            tooltip: true,
            resizable: true,
            width: 200
          }, {
            title: '性别',
            key: 'sex',
            sortable: true,
            ellipsis: true,
            tooltip: true,
            resizable: true,
            width: 150
          },
          {
            title: '类型',
            key: 'type',
            width: 150,
            resizable: true,
            filters: [{
              label: '单名',
              value: 1
            }, {
              label: '多名',
              value: 2
            }],
            filterMultiple: false,
            filterMethod (value, row) {
              if (value === 1) {
                return row.age > 25
              } else if (value === 2) {
                return row.age < 25
              }
            }
          },
          {
            title: '状态',
            key: 'status',
            sortable: true,
            ellipsis: true,
            tooltip: true,
            resizable: true,
            width: 150
          },
          {
            title: '创建时间',
            key: 'createTime',
            sortable: true,
            ellipsis: true,
            tooltip: true,
            resizable: true,
            width: 200
          }, {
            title: '操作',
            slot: 'action',
            width: 200,
            align: 'center',
            resizable: true,
            fixed: 'right'
          }
        ],
        userList: []
      }
    },
    created () {
      this.selectUserAllByPage()
    },
    methods: {
      deleteOne (id) {
        deleteUserList([id]).then(res => {
          let data = res.data
          if (data.code === 200) {
            this.$Message.success('删除成功')
            this.selectUserAllByPage()
          } else {
            this.$Message.warning(data.msg)
          }
        }).catch(err => {
          this.$Message.error('删除用户失败')
        })
      },
      deleteUserList () {
        let users = this.$refs.table.getSelection()
        let ids = []
        users.forEach(v => ids.push(v.id))
        if (ids.length === 0) {
          this.$Message.warning('请选择需要删除的用户')
        }
        deleteUserList(ids).then(res => {
          let data = res.data
          if (data.code === ApiErrorCode.SUCCESS) {
            this.$Message.success('删除成功')
            this.selectUserAllByPage()
          } else {
            this.$Message.warning(data.msg)
          }
        }).catch(err => {
          this.$Message.error('删除用户失败')
        })
      },
      /**
       * 关闭抽屉
       * @param value 是否关闭
       */
      closeDrawer (value) {
        this.openEdit = value
      },
      /**
       * 打开抽屉
       * @param type edit 修改 add 添加
       * @param row 用户数据,用于回显
       */
      openDrawer (type, row) {
        this.openEdit = true
        this.$refs.userEdit.openDrawer(type, row)
      },
      /**
       * 查询用户列表
       */
      selectUserAllByPage () {
        let data = {
          'isAsc': true,
          'orders': [],
          'pageNum': this.page.pageNum,
          'pageSize': this.page.pageSize
        }
        selectAllByPage(data).then(res => {
          const data = res.data
          if (data.code === 200) {
            this.page.total = data.data.total
            this.userList = data.data.records
          }
        })
      },
      /**
       * 操作搜索框
       */
      dropDown () {
        if (this.drop) {
          this.dropDownContent = '展开'
          this.dropDownIcon = 'ios-arrow-down'
        } else {
          this.dropDownContent = '收起'
          this.dropDownIcon = 'ios-arrow-up'
        }
        this.drop = !this.drop
      },
      // 清空多选
      clear () {
        this.$refs.table.selectAll(false)
      },
      pageChange (num) {
        this.page.pageNum = num
        this.selectUserAllByPage()
      },
      pageSizeChange (size) {
        this.page.pageSize = size
        this.selectUserAllByPage()
      }
    }
  }
</script>

<style>
  .operation Button {
    margin: 8px;
  }

</style>
